<template>
	<div>
			<div class="tab">
				<div :class="tabIndex===0?'item active':'item'" v-for="(item,index) in tabBar.list" :key="index" @click="tabIndexClick(item.pagePath)">
					<div v-if="index != 2">
						<view class="btaber-imge">
							<image class="tabbar-icon" mode="aspectFit" :src="tabIndex == index ? item.iconPath: item.selectedIconPath"></image>
						</view>
						<div>{{item.text}}</div>
					</div>
					<div v-else class="item-add active" >
						<image class="middle-tab" :src="item.selectedIconPath"  mode="aspectFit"></image>
						<div class="text">{{item.text}}</div>
					</div>
				</div>
			</div>
	
	</div>
</template>

<script>
	export default {
		props:{
			tabIndex: Number,
			default: 0
		},
		data() {
			return {
				 tabBar: {
						color: '#ccc',
						selectedColor: '#E84351',
						borderStyle: '#ccc',
						backgroundColor: '#fff',
						position: 'bottom',
						list: [
								{
										pagePath: '/pages/home/index',
										iconPath: '/static/tabBar/home_a.png',
										selectedIconPath: '/static/tabBar/home_b.png',
										text: '首页'
								},
								{
										pagePath: '/pages/vip/index',
										iconPath: '/static/tabBar/vip_a.png',
										selectedIconPath: '/static/tabBar/vip_b.png',
										text: 'VIP'
								},
								{
										pagePath: '/pages/upload/index',
										iconPath: '',
										selectedIconPath: '/static/tabBar/upload.png',
										text: '上传'
								},
								{
										pagePath: '/pages/collection/index',
										iconPath: '/static/tabBar/Collection_a.png',
										selectedIconPath: '/static/tabBar/Collection_b.png',
										text: '专题'
								},
								{
										pagePath: '/pages/my/index',
										iconPath: '/static/tabBar/my_a.png',
										selectedIconPath: '/static/tabBar/my_b.png',
										text: '我的'
								}
						]
				},
			}
		},
		methods: {
			
			tabIndexClick(pagePath) {
				console.log(pagePath)
				uni.switchTab({
						url: pagePath  
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.middle-tab {
		width: 120rpx;
		height: 120rpx;
		margin-top: -60rpx;
	}
	.btaber-imge{
		width: 54rpx;
		height: 54rpx;
		margin-top: 6rpx;
		.tabbar-icon {
			width: 100%;
			height: 100%;
		}
	}
	.swiper-item {
		display: flex;
		width: 100%;
		height: 100%;
		text-align: center;
		justify-content: center;
		align-items: center;
	}

	.tab {
		position: fixed;
		z-index: 999999;
		height: 100rpx;
		width: 100%;
		bottom: 0;
		background-color: #FFFFFF;
		display: flex;
		box-shadow: 0px -2px 4px rgba(0, 0, 0, 0.1);
		margin-bottom: env(safe-area-inset-bottom);
		.item-add {
			// width: 20%;
			color: #929292;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			position: relative;
			text-align: center;
			.text {
				font-size: 24rpx;
				// padding-top: 36rpx;
				
			}
		}

		.item {
			width: 20%;
			color: #030039;
			font-size: 24rpx !important;
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			text-align: center;
		}
	}

	.active {
		color: #030039 !important;
	}
</style>